<template>
    <div>
        <ul>
            <li v-for="(item, index) in userArr" :key="index">{{ item }}</li>
        </ul>

        <button @click="editName">修改人名</button>

        <hr />
        <p>{{ userObj.name }}=={{ userObj.age }}--{{ userObj.sex }}</p>
        <button @click="addSex">添加属性</button>
        <button @click="delAge">删除属性</button>
    </div>
</template>

<script>
// $set 语法:
// 在vue2中使用 Object.defineProperty()方法结合发布订阅设计模式实现了对 return
// 返回的对象中的所有的属性进行数据的监听操作, 然后当监听的属性(数据)发生改变,
// 触发了set 方法, 然后再set 方法更新dom ,
// 注意了: 在vue2中如果通过下标修改数据中的某一项,则不回被监听到,所以对应的dom不能更新
// this.$set === Vue.set    =>function(target,key,value)
// 语法: this.$set(target,key,value)

// $delete 
// this.$delete === Vue.delete 
// 语法: this.$detele(target,key)
// vue3使用proxy 设置代理对象, 实现对整个对象的监听,所以对象的属性变化是可以监听到的
import Vue from 'vue'
const { set } = Vue
export default {
    data() {
        return {
            userArr: ['小杨哥', '小黄', '嘴哥', '乔妹', '七老板'],
            userObj: {
                name: '周星驰',
                age: 60
            }
        }
    },
    methods: {
        editName() {
            // this.userArr[0] = '大杨哥'
            // 方式1:监听
            // this.userArr.splice(0, 1, '大杨哥')
            // console.log(this);
            // this.$set(this.userArr, 0, '大杨嫂')
            // 方式2: 监听
            set(this.userArr, 0, '大杨嫂')
            // console.log(this.userArr);
        },
        addSex() {
            //this.userObj.sex = '男'
            // 方式1: 监听
            this.$set(this.userObj, 'sex', '男')

            //console.log(this.userObj);
        },
        delAge() {
            //  delete this.userObj.age
            this.$delete(this.userObj, 'age')
            console.log(this.userObj);
        }
    }
}
</script>


<style scoped></style>